<template>
  <div class="common-layout">
    <el-container>
      <el-header class="navbar-box">
        <el-row :gutter="20" class="navbar-home">
          <el-col :span="4">
            <div class="grid-content ep-bg-purple" />
            <img class="navbar-login" src="../../assets/image/logo.png" alt="">
          </el-col>
          <el-col :span="16">
            <div class="grid-content ep-bg-purple" />
            <p class="title-home">后台管理系统</p>
          </el-col>
          <el-col :span="4">
            <div class="grid-content ep-bg-purple navbar-information" />
            <el-button @click="delToken" plain>退出登录</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside class="sidebar-box">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo ul-sidebar"
                :default-active="active" text-color="#fff" router>
                <el-menu-item :index="item.path"  v-for="item in list" :key="item.path">
                  <span>{{ item.meta.title }}</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main >
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { useRouter,  useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const active = route.path;
const list= router.getRoutes().filter(v => v.meta.isShow);

/** 删除token,达到退出登录的效果 */
const delToken = () => {
  localStorage.removeItem('token');
  router.push('/login');
}
</script>

<style lang="less" scoped>
@background-home-color: rgba(0, 0, 0, 0.7);
/** 头部标签编写 start */
.navbar-box {
  width: 100%;
  height: 80px;
  background: @background-home-color;
  position: relative;
  user-select: none;
  color: #fff;
  box-sizing: border-box;

  .navbar-home {
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .navbar-login {
    height: 60px;
  }
  
  .title-home {
    font-size: 20px;
    text-shadow: 1px 1px 4px lightcyan;
  }
}
/** 头部标签编写 end */ 
/** main 标签编写 start */ 
.main-box {
  width: 100%;
  height: 100%;
}
/** main标签编写end */
/** aside标签编写 start */
.sidebar-box {
  background-color: #545c64;
  box-sizing: border-box;
  width: 200px;
  .tac {
    width: inherit;
    height: inherit;
  }
 
    .ul-sidebar {
    width: 100%;
    height: calc(100vh - 80px);
    user-select: none;
  }
  
}
 
/** aside标签编写 end */
</style>